<template>
  <div class="questioning_management_wrapper">
    <div class="main_content">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="未回复" name="1">
          <NoResponse
            :tableDataOfNoResponse="tableDataOfNoResponse"
            :total="totalOfNoResponse"
            @handleSearch="handleSearch"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
            :pageParams="pageParamsOfNoResponse"
          ></NoResponse
        ></el-tab-pane>
        <el-tab-pane label="已回复" name="2">
          <NoResponse
            :tableDataOfNoResponse="tableDataOfResponse"
            :total="totalOfResponse"
            @handleSearch="handleSearch"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
            :pageParams="pageParamsOfResponse"
          ></NoResponse
        ></el-tab-pane>
        <el-tab-pane label="已关闭" name="3">
          <NoResponse
            :tableDataOfNoResponse="tableDataOfClose"
            :total="totalOfClose"
            @handleSearch="handleSearch"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
            :pageParams="pageParamsOfClose"
          ></NoResponse
        ></el-tab-pane>
        <el-tab-pane label="全部" name="4">
          <NoResponse
            :tableDataOfNoResponse="tableDataOfAll"
            :total="totalOfAll"
            @handleSearch="handleSearch"
            @handleCurrentChange="handleCurrentChange"
            @handleSizeChange="handleSizeChange"
            :pageParams="pageParamsOfAll"
          ></NoResponse
        ></el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import { mapActions } from 'vuex'
import NoResponse from './components/no-response.vue'
export default {
  components: {
    NoResponse,
  },
  data() {
    return {
      activeName: '1',
      // 未回复表格数据
      tableDataOfNoResponse: [],
      pageParamsOfNoResponse: {
        pageNo: 1,
        pageSize: 10,
      },
      totalOfNoResponse: null,
      // 已回复表格数据
      tableDataOfResponse: [],
      pageParamsOfResponse: {
        pageNo: 1,
        pageSize: 10,
      },
      totalOfResponse: null,
      // 已关闭表格数据
      tableDataOfClose: [],
      pageParamsOfClose: {
        pageNo: 1,
        pageSize: 10,
      },
      totalOfClose: null,
      // 全部表格数据
      tableDataOfAll: [],
      pageParamsOfAll: {
        pageNo: 1,
        pageSize: 10,
      },
      totalOfAll: null,
      projectId: '',
      environment: '',
      queryMethod: '',
      coreIds: [],
    }
  },
  created() {
    this.projectId = this.projectId = localStorage.getItem('sys-project-id') || ''
    this.environment = localStorage.getItem('environment')
    this.coreIds = JSON.parse(localStorage.getItem('coreIds'))
    this.getTableData()
  },
  methods: {
    ...mapActions('questioningManagement', ['getQuestioningManagementAPI']),
    // 切换tab
    handleClick() {
      this.queryMethod = ''
      this.getTableData()
    },
    // 获取表格数据
    async getTableData() {
      let data = {
        projectId: this.projectId,
        environment: this.environment,
        status: this.activeName,
        queryMethod: this.queryMethod,
        coreIds: this.coreIds,
      }
      if (this.activeName === '1') {
        data = {
          ...data,
          ...this.pageParamsOfNoResponse,
        }
        const res = await this.getQuestioningManagementAPI({ data })
        if (res.code === 200) {
          this.tableDataOfNoResponse = res.data.data.records
          this.totalOfNoResponse = res.data.data.total
        }
      } else if (this.activeName === '2') {
        data = {
          ...data,
          ...this.pageParamsOfResponse,
        }
        const res = await this.getQuestioningManagementAPI({ data })
        if (res.code === 200) {
          this.tableDataOfResponse = res.data.data.records
          this.totalOfResponse = res.data.data.total
        }
      } else if (this.activeName === '3') {
        data = {
          ...data,
          ...this.pageParamsOfClose,
        }
        const res = await this.getQuestioningManagementAPI({ data })
        if (res.code === 200) {
          this.tableDataOfClose = res.data.data.records
          this.totalOfClose = res.data.data.total
        }
      } else if (this.activeName === '4') {
        data = {
          ...data,
          ...this.pageParamsOfAll,
        }
        data.status = ''
        const res = await this.getQuestioningManagementAPI({ data })
        if (res.code === 200) {
          this.tableDataOfAll = res.data.data.records
          this.totalOfAll = res.data.data.total
        }
      }
    },

    // 重置页面
    resetPageParams() {
      if (this.activeName === '1') {
        this.pageParamsOfNoResponse = {
          pageNo: 1,
          pageSize: 10,
        }
      } else if (this.activeName === '2') {
        this.pageParamsOfResponse = {
          pageNo: 1,
          pageSize: 10,
        }
      } else if (this.activeName === '3') {
        this.pageParamsOfClose = {
          pageNo: 1,
          pageSize: 10,
        }
      } else if (this.activeName === '4') {
        this.pageParamsOfAll = {
          pageNo: 1,
          pageSize: 10,
        }
      }
    },

    // 传递搜索值
    handleSearch(val) {
      this.resetPageParams()
      this.queryMethod = val
      this.getTableData()
    },
    // 传递页码
    handleCurrentChange(val) {
      if (this.activeName === '1') {
        this.pageParamsOfNoResponse.pageNo = val
      } else if (this.activeName === '2') {
        this.pageParamsOfResponse.pageNo = val
      } else if (this.activeName === '3') {
        this.pageParamsOfClose.pageNo = val
      } else if (this.activeName === '4') {
        this.pageParamsOfAll.pageNo = val
      }
      this.getTableData()
    },
    // 传递页码尺寸
    handleSizeChange(val) {
      if (this.activeName === '1') {
        this.pageParamsOfNoResponse.pageSize = val
      } else if (this.activeName === '2') {
        this.pageParamsOfResponse.pageSize = val
      } else if (this.activeName === '3') {
        this.pageParamsOfClose.pageSize = val
      } else if (this.activeName === '4') {
        this.pageParamsOfAll.pageSize = val
      }
      this.getTableData()
    },
  },
}
</script>

<style lang="scss" scoped>
.questioning_management_wrapper {
  background-color: $white;
  height: 100%;
  .main_content {
    padding: 12px;
    background-color: $white;
  }
}
</style>
